﻿<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { transformI18n } from '@/plugins/i18n'
import { storeToRefs } from 'pinia'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'
import { useLoginStoreWithOut } from '@/store/storage/loginStore'
import Template01 from './components/template01/index.vue'
import Template02 from './components/template02/index.vue'
import Template03 from './components/template03/index.vue'
const route = useRoute()

const { locale } = useI18n()
const systemConfigStore = useSystemConfigStore()
const { systemConfig, language } = storeToRefs(systemConfigStore)
const loginStore = useLoginStoreWithOut()
const { activeLoginTemplate } = storeToRefs(loginStore)

const translationLanguage = (lang) => {
  language.value = lang
  locale.value = lang
  let htmlLang = ''
  if (lang === 'zh') {
    htmlLang = 'zh-Hans-CN'
  } else if (lang === 'zh_tw') {
    htmlLang = 'zh-Hant-TW'
  } else {
    htmlLang = lang
  }
  document.querySelector('html')?.setAttribute('lang', htmlLang)
  document.title = transformI18n('menus.' + unref(route.meta.title), unref(route.meta.i18n)) + ' - ' + transformI18n('settings.settingProjectTitle', true) // 动态title
  systemConfigStore.setSystemConfigCache()
  systemConfigStore.setLanguageCache()
}

const handleCommand = (v) => {
  activeLoginTemplate.value = v
  loginStore.setLoginTemplateCache()
}
</script>

<template>
  <div class="login-page">
    <div class="header">
      <div class="left"></div>
      <div class="right">
        <el-dropdown @command="handleCommand" popper-class="login-template">
          <span class="el-dropdown-link">
            <span class="text-span">{{ transformI18n('text.登录模板', true) }} {{ activeLoginTemplate }}</span>
            <svg-icon class="el-icon--right" icon="ep:arrow-down"></svg-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="1" :class="activeLoginTemplate === '1' ? 'is-active' : ''">
                {{
                  transformI18n('text.登录模板', true) }}
                1
              </el-dropdown-item>
              <el-dropdown-item command="2" :class="activeLoginTemplate === '2' ? 'is-active' : ''">
                {{
                  transformI18n('text.登录模板', true) }}
                2
              </el-dropdown-item>
              <el-dropdown-item command="3" :class="activeLoginTemplate === '3' ? 'is-active' : ''">
                {{
                  transformI18n('text.登录模板', true) }}
                3
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <!-- 国际化 -->
        <el-dropdown v-if="systemConfig.isGlobalizationEnable" :trigger="systemConfig.device === 'mobile' ? 'click' : 'hover'">
          <span class="vk-icon vk-globalization"><svg-icon icon="ii:icon-translate"></svg-icon></span>
          <template #dropdown>
            <el-dropdown-menu class="vk-translation">
              <el-dropdown-item @click="translationLanguage('zh')">
                <div :class="['vk-item-translation', language === 'zh' ? 'is-active' : '']">
                  <svg-icon class="vk-check" icon="ep:check" v-show="language === 'zh'"></svg-icon>
                  简体中文
                </div>
              </el-dropdown-item>
              <el-dropdown-item @click="translationLanguage('zh_tw')">
                <div :class="['vk-item-translation', language === 'zh_tw' ? 'is-active' : '']">
                  <svg-icon class="vk-check" icon="ep:check" v-show="language === 'zh_tw'"></svg-icon>
                  繁體中文
                </div>
              </el-dropdown-item>
              <el-dropdown-item @click="translationLanguage('en')">
                <div :class="['vk-item-translation', language === 'en' ? 'is-active' : '']">
                  <svg-icon class="vk-check" icon="ep:check" v-show="language === 'en'"></svg-icon>
                  English
                </div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <el-scrollbar>
      <Template01 v-if="activeLoginTemplate === '1'"></Template01>
      <Template02 v-else-if="activeLoginTemplate === '2'"></Template02>
      <Template03 v-else-if="activeLoginTemplate === '3'"></Template03>
    </el-scrollbar>
  </div>
</template>

<style scoped lang="scss">
.login-page {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    width: 100%;

    .left {
      flex: 1;
    }

    .right {
      padding: 12px;

      .vk-globalization {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 32px;
        padding: 0 10px;
        color: #ffffff;
        border: 1px solid var(--el-border-color-lighter);
        border-radius: 4px;
        cursor: pointer;
      }

      .el-dropdown-link {
        display: flex;
        align-items: center;
        height: 32px;
        padding: 0 12px;

        .text-span,
        .el-icon--right {
          color: var(--el-color-primary);
        }
      }
    }
  }
}
</style>
<style lang="scss">
.login-template {

  .el-dropdown-menu__item {
    &.is-active {
      color: var(--el-color-primary);
    }
  }
}
</style>
